<template>
  <div class="p-6">
    <!-- 数据总量 -->
    <div class="text-center text-[#5dc5ef]  text-3xl opacity-80">
      豆瓣top250电影
    </div>
    <!-- 数据分类 -->
    <div class="mt-3 flex flex-wrap ">
      <div class="w-1/3 text-center text-slate-400 text-sm font-[lFONT]">
        {{a}}：
        <span ref="t1" class="font-[lFONT] text-[#5dc5ef] text-3xl"
          >8,778,988</span
        >
      </div>
      <div class="w-1/3 text-center text-slate-400 text-sm">
        {{b}}：
        <span ref="t2" class="font-[lFONT] text-[#5dc5ef] text-3xl"
          >8,778,988</span
        >
      </div>
      <div class="w-1/3 text-center text-slate-400 text-sm">
        {{c}}：
        <span ref="t3" class="font-[lFONT] text-[#5dc5ef] text-3xl"
          >8,778,988</span
        >
      </div>
      <div class="w-1/3 text-center text-slate-400 text-sm">
        {{d}}：
        <span ref="t4" class="font-[lFONT] text-[#5dc5ef] text-3xl"
          >8,778,988</span
        >
      </div>
      <div class="w-1/3 text-center text-slate-400 text-sm">
        {{e}}：
        <span ref="t5" class="font-[lFONT] text-[#5dc5ef] text-3xl"
          >8,778,988</span
        >
      </div>
      <div class="w-1/3 text-center text-slate-400 text-sm">
        {{f}}：
        <span ref="t6" class="font-[lFONT] text-[#5dc5ef] text-3xl"
          >8,778,988</span
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { CountUp } from "countup.js";

const props = defineProps({
  data: Array,
});
console.log("TOTAL>props" , props)

const t1 = ref(null);
const t2 = ref(null);
const t3 = ref(null);
const t4 = ref(null);
const t5 = ref(null);
const t6 = ref(null);
const a = ref('a');
const b = ref('b');
const c = ref('c');
const d = ref('d');
const e = ref('e');
const f = ref('f');

onMounted(() => {
  update();
});

const update = () => {
  const categoryCount = props.data.reduce((acc, item) => {
    if (item !== undefined && item !== null) {
      acc[item] = (acc[item] || 0) + 1;
    }
    return acc;
  }, {});
  // console.log("TOTAL>categoryCount" ,categoryCount)
  // 提取统计结果并只取前六个类别
  const yAxisData = Object.keys(categoryCount)
    .sort((a, b) => categoryCount[b] - categoryCount[a])
    .slice(0, 6);
  // console.log("TOTAL>y" , yAxisData)
  a.value = yAxisData[0] || "";
  b.value = yAxisData[1] || "";
  c.value = yAxisData[2] || "";
  d.value = yAxisData[3] || "";
  e.value = yAxisData[4] || "";
  f.value = yAxisData[5] || "";

  new CountUp(t1.value, categoryCount[yAxisData[0]]).start();
  new CountUp(t2.value, categoryCount[yAxisData[1]]).start();
  new CountUp(t3.value, categoryCount[yAxisData[2]]).start();
  new CountUp(t4.value, categoryCount[yAxisData[3]]).start();
  new CountUp(t5.value, categoryCount[yAxisData[4]]).start();
  new CountUp(t6.value, categoryCount[yAxisData[5]]).start();
};

watch(() => props.data, update);
</script>

<style lang="scss" scoped></style>